import React from 'react'
import { inject, observer } from 'mobx-react';
import { withRouter,Route } from 'react-router-dom';
import { Tools } from 'weaver-mobile';
import { ListPage  } from 'weaver-mobile-page';
import { RouteLayout } from 'weaver-mobile-page';
import * as mobx from 'mobx'
import './style/popupListButton.less';
import { Icon,Toast } from 'weaver-mobile';
const ButtonGroup = RouteLayout.ButtonGroup;
const Normal = ListPage.Normal;
const getLabel = Tools.getLabel;

@inject('popupListStore')
@withRouter
@observer
export default class PopupListButton extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
    };
   }
  
   componentDidMount() {
   }
  
   render() {
    const { popupListStore,history,fnaSpecialStore }= this.props ;
    const { list,template,loding }= popupListStore ;
    const { path,id } = fnaSpecialStore;
    //隐藏loding
    if(!loding){
      Toast.hide();
    }

    return (
      <div>
        <div className={'fna-choose-item fna-choose-item-edit'}>
          {this.getShowHtml()}
        </div>
        <Route
           key={id}
           path={path}
          render={() => (
            <RouteLayout>
              <div
                key="popupList"
                className="wm-route-layout"
                style={{overflow:'auto','-webkit-overflow-scrolling':'touch'}}
              >
                {mobx.toJS(list.data).length > 0 && <Normal
                  template={template}
                  store={list}
                  onRowClick={(arg) => {return;}}
                />}

                {mobx.toJS(list.data).length <= 0 && <div>
                <div class="am-list-footer">
                  <div class="wm-list-view-page-modal-nomore">
                    <span class="wm-list-view-page-modal-nomore-line-left">
                    </span><span class="wm-list-view-page-modal-nomore-line-name">{getLabel(390064,'没有更多啦')}</span>
                    <span class="wm-list-view-page-modal-nomore-line-right"></span>
                  </div>
                </div>
                </div>}
                <ButtonGroup data={this.getButton()} />
              </div>
            </RouteLayout>
          )}
        />
      </div>
    );
  }

  //获取展示的组件
  getShowHtml = () => {
    const { showType,isDetailShow,viewAttr,rowIndex,fieldId,fieldObj,isCardEdit } = this.props;
    const isDetail = mobx.toJS(fieldObj).tableMark.indexOf("detail_") > -1;
    const fieldMark = isDetail ? `field${fieldId}_${rowIndex}` : `field${fieldId}`;
    let component = [];
    let placeholder = getLabel(83211,'查看金额修改历史');
    //isDetailShow=true表示没有点击进入明细
    if(isDetailShow){
      if(!isCardEdit){
        component = [
          <div onClick={this.clickEvent}>
            {placeholder}
            <div>
              <div id={`${fieldMark}span`} className="fna-wf-input-view"></div>
              <input type="hidden" id={fieldMark} name={fieldMark}/>
            </div>
          </div>];
      } else {
        if(viewAttr === 1){
          component = [
            <div>
              {placeholder}
              <div>
                <div id={`${fieldMark}span`} className="fna-wf-input-view"></div>
                <input type="hidden" id={fieldMark} name={fieldMark}/>
              </div>
            </div>];
        }
      }
    } else {
        component = [
            <div className="fna-choose-item-holder" onClick={this.clickEvent}>
              {placeholder}
              <div>
                <div id={`${fieldMark}span`} className="fna-wf-input-view"></div>
                <input type="hidden" id={fieldMark} name={fieldMark}/>
              </div>
            </div>,
            <div className="fna-choose-item-right">
                <Icon type="right" />
            </div>
        ];
    }

    return component;
  }

  //获取按钮组
  getButton = () => {
    const { history }= this.props ;
    let buttonGroupData = [
      {
        key: 'submit',
        text: getLabel(826,'确定'),
        onClick: () => {history.go(-1);},
        type: 'primary'
      }
    ];

    return buttonGroupData;
  }

  clickEvent = () => {
    const { history,fnaSpecialStore,isDetailShow }= this.props ;
    const { popupListStore,detailRecordId,requestid }= this.props ;
    const { getPopupList }= popupListStore ;
    let queryData = {'detailRecordId':detailRecordId,'requestid':requestid};
    getPopupList(queryData);
    history.push(fnaSpecialStore.path);
    //展示loding
    if(!isDetailShow){
      Toast.loading('Loading...', 5, () => {
      });
    }
  }
}